<template>
    <div>
        <!-- 购物车为空时 -->
        <van-empty v-if="store.cartlist.length === 0" description="购物车还是空的~~" />

        <div class="box" v-for="item in store.cartlist" :key="item.id">
            <van-checkbox v-model="item.checked"></van-checkbox>
            <van-swipe-cell>
                <van-card :num="item.count" :price="item.price" desc="描述信息" :title="item.title" class="goods-card"
                    :thumb="item.img">
                    <template #footer>
                        <van-stepper v-model="item.count" />
                    </template>
                </van-card>

                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="deleteFun(item.id)" />
                </template>
            </van-swipe-cell>
        </div>

        <van-submit-bar :price="store.totalPrice" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="allChecked">全选</van-checkbox>
            <template #tip>
                你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>


    </div>
</template>

<script setup>

import { useCounterStore } from '@/stores/counter';
import { computed } from 'vue';
const store = useCounterStore()

const onSubmit = () => showToast('点击按钮');
const onClickLink = () => showToast('修改地址');

const deleteFun = id =>{
    store.deleteItem(id)
}

const allChecked = computed({
    get(){
        // 如果数组为空时，直接return false 
        // 如果有值时，遍历数组，把全选复选框的状态给到每一个商品前面的复选框
        if(store.cartlist.length === 0){
            return false
        } else {
            return store.cartlist.every(item => item.checked)
        }
    },
    set(newval){
        store.cartlist.forEach(item => item.checked = newval)
    }   
})

</script>
<style lang="scss" scoped>
.van-submit-bar {
    position: fixed;
    left: 0;
    bottom: 50px;
}
.box {
    display: flex;

    .van-swipe-cell {
        flex: 1;
    }
}

.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}
</style>